<template>
  <div class="friend-list" ref="friend-list">
    <van-list
        class="list-item"
        v-model="loading"
        :finished="finished"
        :finished-text="list.length === 0 ? '暂无数据' : '没有更多了'"
        @load="onLoad"
    >
      <!--      <div class="body">-->
      <div class="title">{{ title }}</div>
      <div class="list" v-for="(item,index) in list" :key="index" @click="gotoPersonal(item)">
        <!--        -->
        <!-- <van-image :src="item.avatar?store.state.imgUrl+item.avatar:logo" round width="55" height="55"/> -->

       <div class="avatar"  :style="{backgroundImage: `url(${item.avatar ? store.state.imgUrl + item.avatar:logo})`}"></div>
<!--        <div class="avatar" v-else :style="{backgroundImage: logo}">-->
          <div class="newFan" v-if="item.isNewFan == 0"></div>
<!--        </div>-->
        <div class="name">{{ item.name }}<i style="font-size:17px;margin-left:5px"
                                                   :class="item.sex ? ( item.sex === '1' ? 'el-icon-male' : 'el-icon-female') : '' "
                                                   :style="item.sex ? (item.sex === '1' ?'color:#3588e5' : 'color:#ff0099') : ''"></i></div>
        <div class="btn">
          <!--          朋友的两个状态-->
          <div class="btn-item yc" v-if="item.isAttention==1 && article.id == 0"
               @click.stop="friendRemove(item)">移除
          </div>
          <div class="btn-item gz" v-if="item.isAttention==0 && article.id == 0"
               @click.stop="friendAttention(item)">回关
          </div>
          <!--关注的两个状态-->
          <div class="btn-item yc" v-if="item.isAttention==1 && article.id == 1 "
               @click.stop="ygzAttention(item)">
            已关注
          </div>
          <div class="btn-item yc" v-if="item.isAttention==2 && article.id == 1 "
               @click.stop="MyAttention(item)">
            互相关注
          </div>
          <div class="btn-item gz"
               v-if="item.isAttention==3 && article.id == 1 ||item.isAttention==4 && article.id == 1 "
               @click.stop="cecanlAttention(item)">
            关注
          </div>
          <!--粉丝的状态-->
          <div class="btn-item yc" v-if="item.isAttention==2 && article.id == 2" @click.stop="hxgzAttention(item)">互相关注
          </div>
          <div v-if="item.isAttention==0 && article.id == 2" style="display: flex">
            <div class="btn-item yc" @click.stop="remove(item)">移除</div>
            <div class="btn-item gz" @click.stop="hgAttention(item)" style="margin-left: 5px;">回关</div>
          </div>
          <!--        </div>-->
        </div>
      </div>
    </van-list>
    <van-action-sheet v-model="showAttention" :actions="attentionList" cancel-text="取消" @select="onSelect"/>

  </div>
</template>

<script>
import {mapState} from "vuex";
import {getFanFollowList} from "@/api/my";
import {attention, removeFans, removeFriends} from "../../../../api/my";
import store from '../../../../store';
import {Dialog} from 'vant';
export default {
  name: "friendList",
  props: {
    article: {
      type: Object,
      required: true // 必选
    },
  },
  data() {
    return {
      logo: require("@/assets/tx.png"),
      store:store,
      hxgz: '互相关注',
      ygz: '已关注',
      showAttention: false,
      attentionList: [{name: '取消关注'}],
      loading: false,
      finished: false,
      list: [],
      current: 1, // 获取下一页数据current
      size: 10,
      title: '',
      friendRemoveBolean: false,
      userId: '',
      state: '',
      ygzBoolean: false,
      hxgzBoolean: true,
      gzBoolean: true
    }
  },

  activated() {
    this.$refs['friend-list'].scrollTop = this.scrollTop
  },
  computed: {
    ...mapState('my', ['userNum']),
  },
  mounted() {
    switch (this.article.id) {
      case 0:
        this.title = `我的朋友(${this.userNum[1].num})`
        break
      case 1:
        this.title = `我的关注(${this.userNum[2].num})`
        break
      case 2:
        this.title = `我的粉丝(${this.userNum[3].num})`
        break
    }
  },
  methods: {
    //已关注-关注
    async ygzAttention(item) {
      item.isAttention = 3
      await this.attention(item)
    },
    //已关注-相互关注
    async MyAttention(item) {
       Dialog.confirm({
        title: '提示',
        message: '您确定要取消关注该用户吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {
        this.attention(item)
        item.isAttention = 4
      }).catch(err => {
        
      })
      // console.log(item)
      // item.isAttention = 4
      // await this.attention(item)
    },
   
    //点击关注按钮
    async cecanlAttention(item) {
      if (item.isAttention == 3) {
        item.isAttention = 1
      }
      if (item.isAttention == 4) {
        item.isAttention = 2
      }
      let res = await this.attention(item)
    },
    async hxgzAttention(item) {
      this.tipIsAttention(item)
    },
     // 取消关注二次提示
     tipIsAttention(item){
      Dialog.confirm({
        title: '提示',
        message: '您确定要取消关注该用户吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {
        this.attention(item)
        item.isAttention = 0
      }).catch(err => {
        
      })
    }, 
    async hgAttention(item) {
      
      let res = await this.attention(item)
      if (res.success) {
        item.isAttention = 2
      }
    },
    //点击取消关注的时候 调用的接口
    onSelect(item) {
      //调接口
      console.log(item)
    },
    async friendAttention(item) {
       let res = await this.attention(item)
      if (res.success) {
        item.isAttention = 1
      }
    },
    async friendRemove(item) {
      Dialog.confirm({
        title: '提示',
        message: '您确定要取消关注该用户吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {
        this.attention(item)
        item.isAttention = 0
      }).catch(err => {
        
      })
      // let res = await this.attention(item)
      // if (res.success) {
      //   item.isAttention = 0
      // }
    },

    // 朋友
    //朋友(移除) 关注(已关注，相互关注，关注) 粉丝(移除 回关 相互关注) 都走这个接口 后台调接口 前端直接修改变化
    attention(item) {
      let data = {
        id: item.userId
      }
      return new Promise((resolve, reject) => {
        attention(data).then(res => {
          resolve(res)
          if (res.success) {
            // if (item.isAttention == 1) {
            //   item.isAttention = 0
            // }else{
            //   item.isAttention = 1
            // }
            
          }
        })
      })
    },
    // 粉丝(移除)
    remove(item) {
       Dialog.confirm({
        title: '提示',
        message: '您确定要移除该粉丝吗？',
        confirmButtonColor: 'rgba(242, 150, 0, 1)'
      }).then(() => {
         let data = {
        id: item.userId
      }
      removeFans(data).then(res => {
        if (res.success) {
          console.log(this.list)
          this.list.forEach((item, index) => {
            if (item.userId == data.id) {
              console.log('+++++删除数据',)
              this.list.splice(index, 1)
            }
          })
          this.$toast.success('移除粉丝成功')
        }
      })
      }).catch(err => {
        
      })
     
    },
    async onLoad() {
      // let userInfo = await this.getUserInfo()
      // this.userInfo.avatar = userInfo.data.avatar
      // this.userInfo.name = userInfo.data.name
      // this.userInfo.userId = userInfo.data.userId
      // this.$store.dispatch('my/setUserInfo', this.userInfo)
      // console.log('userInfo', this.userInfo)
      // 获取好友列表
      const data = await getFanFollowList({
        menuType: this.article.id,
        size: this.size,
        current: this.current,
      })
      if (data.data !== null) {
        const {records} = data.data
        this.list.push(...records)
        // this.list.forEach((item, index) => {
        //   item.hxgz = 3
        //   item.ygz = 4
        // })
        console.log('list', this.list)
        // sessionStorage.setItem('homeData', JSON.stringify(this.list))
        // 3. 加载结束
        this.loading = false
        if (records.length > 0) {
          this.current += 1
        } else {
          this.finished = true
        }
        if (records.length <= 0) {
          this.finished = true
        } else {
          this.finished = false
        }
      } else {
        this.finished = true
      }
    },
     // 跳转到主页
    gotoPersonal(item) {
        if (item.isOwn == 0) {//跳转到自己的个人主页
            this.$router.push({path: '/personalPage',query:{}})
        }else{//跳转到别人主页的个人主页
            this.$router.push({path: '/visitPersonal',query:{obj:JSON.stringify(item)}})
        }
    }
  }
}
</script>

<style scoped lang="less">
.friend-list {
  //.list-item /deep/ .van-list__error-text, .van-list__finished-text, .van-list__loading {
  //  line-height: 0;
  //}

  .title {
    font-size: 17px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 24.62px;
    color: rgba(0, 0, 0, 1);
    text-align: left;
    vertical-align: top;
    margin-top: 16px;
    margin-bottom: 20px;
  }

  .list {
    display: flex;
    //justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid rgba(229, 229, 229, 1);
    padding-bottom: 10px;
    padding-top: 10px;

    .avatar {
      border: 1px solid #ebeef5;
       background-size: 100%;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      opacity: 1;
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    
      .newFan {
        position: absolute;
        right: 0px;
        top: 0px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        opacity: 1;
        background: rgba(255, 0, 0, 1);
        border: 1px solid rgba(255, 255, 255, 1);
      }
    }

    .name {
      // width:120px;
      font-size: 17px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 24.62px;
      color: rgba(0, 0, 0, 1);
      text-align: left;
      vertical-align: top;
      margin-left: 10px;
      overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word; /* 允许换行 */
    }

    .btn {
      margin-left: auto;

      .btn-item {
        //width: 54.59px;
        height: 21.9px;
        opacity: 1;
        border-radius: 3px;

        font-size: 17px;
        font-weight: 400;
        line-height: 21.9px;
        color: rgba(255, 255, 255, 1);
        text-align: center;
        vertical-align: top;
        padding: 2px  5px;
      }

      .yc {
        background: rgba(242, 150, 0, 1);
        border: 2px solid rgba(242, 150, 0, 1);
      }

      .gz {
        background: rgba(255, 0, 0, 1);
        border: 2px solid rgba(255, 0, 0, 1);
      }

    }
  }
}
</style>
